<template>
  <div>
    <div class="vux-demo">
    <!-- <x-header :left-options="{showBack: false}" slot="headr" >实验室设备管理系统</x-header> -->
      <img class="logo" src="../..//assets/zzu-logo.png">
      <group>
        <x-input title="用户名：" v-model="user.account" label-width="80px" ></x-input>
        <x-input title="密码："  type="password" v-model="user.password"   label-width="80px" ></x-input>
      </group> 
      <box gap=" 10px 10px">
        <x-button type="primary" @click.native="loginbtn" >登录</x-button>
        <p style="float:right; margin-top: 15px"> <cell :link="{path: '/register'}"><a style="color:#e6a23c">注册</a></cell></p>
      </box> 
    </div> 
        <div v-transfer-dom>
      <alert v-model="show1" title="错误提示">请输入用户名！</alert>
      <alert v-model="show" title="错误提示">请输入密码！</alert>
    </div>
    <img style="margin-left: 9px" width="70%" src="/api/tpl/assets/images/logo-small.png">
  </div>
</template>
<script>
 import {Group, Alert, XInput, XButton, Cell, Box, XHeader, TransferDomDirective as TransferDom} from 'vux'
export default{
   directives: {
     TransferDom
   },
   data () {
     return {
       user: {
         account: '',
         password: ''
       },
       show: false,
       show1: false
     }
   },
   components: {
     Cell,
     Group,
     XInput,
     XButton,
     Box,
     Alert,
     XHeader
   },
   created () {
   },
   watch: {
   },
   methods: {
     loginbtn () {
       if (this.user.account === '') {
         this.show1 = true
       } else if (this.user.password === '') {
         this.show = true
       } else {
         this.$http.post('/api/ac/login', this.user).then((res) => {
           if (res.data.code === 0) {
             this.$router.replace('/')
           }
           if (res.data.code === 3) {
             alert('账号不存在或密码错误')
           }
         })
       }
     }
   }
}
</script>

<style>
.vux-demo {
  text-align: center;
}
.logo {
  width: 150px;
  margin-top: 10%;
}
</style>
